<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-17 15:04:34
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-21 15:39:08
 * @FilePath: \appGly\components\formz\components\StepControl.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="">
    <timepicker
      v-for="(item, key) in inputs"
      :item="item"
      :data.sync="pickerdata"
    ></timepicker>
    <u-form-item>
      <view class="z-type-cdz u-flex u-flex-end" style="flex: 1; height: 40px">
        <u-button
          type="primary"
          size="mini"
          :custom-style="btnadfstyle"
          v-if="i < max"
          @click="i++"
        >
          添加档数
        </u-button>
        <view class="" style="width: 20rpx"></view>
        <u-button
          type="error"
          size="mini"
          :custom-style="btnadfstyle"
          v-if="i > min"
          @click="i--"
        >
          减少档数
        </u-button>
      </view>
    </u-form-item>
  </view>
</template>

<script>
  import timepicker from "./timepicker";
  export default {
    components: {
      timepicker,
    },
    props: {
      item: {
        typeof: Object,
        default: () => {
          return {};
        },
      },
      data: {
        typeof: Object,
        default: () => {
          return {};
        },
      },
      value: {
        typeof: [String, Number, Boolean, Array, Object],
        default: () => {
          return "";
        },
      },
    },
    data() {
      return {
        show: false,
        inputValue: "",
        i: 0,
        btnadfstyle: {
          flex: 0,
          margin: 0,
          whiteSpace: "nowrap",
        },
        // pickerdata: {},
      };
    },
    mounted() {
      this.init();
    },
    computed: {
      pickerdata: {
        get() {
          return this.data;
        },
        set(v) {
          this.$emit("update:data", v);
        },
      },

      inputs() {
        let r = [];
        let itemchildren = this.item.children;
        for (let index = 1; index <= this.i; index++) {
          r = r.concat(
            itemchildren.map((e) => {
              let r = {
                ...e,
                label: e.label.replaceAll("{0}", index),
                defaultValue: e.defaultValue ? e.defaultValue[index - 1] : "",
              };
              if (e.value) {
                // value: e.value.replaceAll('{0}', index),
                r.value = e.value.replaceAll("{0}", index);
              }
              if (e.modelValues) {
                r.modelValues = e.modelValues.map((e) => {
                  return {
                    ...e,
                    value: e.value.replaceAll("{0}", index),
                  };
                });
              }
              return r;
            })
          );
        }

        return r;
      },
      max() {
        return this.item.max;
      },
      min() {
        return this.item.min || 4;
      },
    },
    watch: {
      // value() {
      //   this.inputValue = this.value;
      // },
    },
    methods: {
      blur() {
        // this.$emit("input", this.inputValue);
      },
      ifn() {
        let i = 0;
        i = this.item.min || 4;
        for (let index = this.item.max; index > i; index--) {
          let keys = this.item.children.map((e) => {
            if (e.modelValues) {
              return e.modelValues.map((e) => e.value.replaceAll("{0}", index));
            }
            return e.value.replaceAll("{0}", index);
          });
          keys = keys.flat();
          if (keys.some((e) => this.data[e] && this.data[e] != "0")) {
            i = index;
            break;
          }
        }
        return i;
      },
      init() {
        this.i = this.ifn();
        console.log(123456);
      },
    },
  };
</script>

<style lang="scss">
  .dw {
    color: #2093f5;
  }
</style>
